<template>
  <CloudTreeSelect
    v-model="value"
    tree-data-simple-mode
    style="width: 300px"
    :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
    :tree-data="treeData"
    placeholder="Please select"
    :load-data="onLoadData"
  />
</template>

<script>
  export default {
    title: '5.异步加载 ',
    subTitle: '异步加载树节点。',
    data () {
      return {
        value: undefined,
        treeData: [
          { id: 1, pId: 0, value: '1', title: 'Expand to load' },
          { id: 2, pId: 0, value: '2', title: 'Expand to load' },
          { id: 3, pId: 0, value: '3', title: 'Tree Node', isLeaf: true },
        ],
      }

    },
    methods: {
      genTreeNode (parentId, isLeaf = false) {
        const random = Math.random()
          .toString(36)
          .substring(2, 6);
        return {
          id: random,
          pId: parentId,
          value: random,
          title: isLeaf ? 'Tree Node' : 'Expand to load',
          isLeaf,
        };
      },
      onLoadData (treeNode) {
        return new Promise(resolve => {
          const { id } = treeNode.dataRef;
          setTimeout(() => {
            this.treeData = this.treeData.concat([
              this.genTreeNode(id, false),
              this.genTreeNode(id, true),
            ]);
            resolve();
          }, 300);
        });
      },
    },
    watch: {
      value (value) {
        console.log(value);
      },
    },
  }
</script>
<style lang="scss" scoped>
</style>